মডিউল (NgModules)

Web Development - অ্যাঙ্গুলার (Angular) - Angular এর স্থাপত্য |
1
1

Angular-এ NgModules হলো একটি ফ্রেমওয়ার্ক কাঠামো, যা অ্যাপ্লিকেশনের বিভিন্ন ফিচার এবং ফাংশনালিটি সংগঠিত এবং ম্যানেজ করার জন্য ব্যবহৃত হয়। প্রতিটি Angular অ্যাপ্লিকেশন একটি বা একাধিক NgModules-এ বিভক্ত।

প্রাথমিকভাবে, একটি Angular অ্যাপ্লিকেশন সর্বদা AppModule নামে একটি মূল মডিউল নিয়ে শুরু হয়।


NgModule কী?

NgModule হলো একটি ডেকোরেটর যা একটি ক্লাসকে মডিউল হিসেবে চিহ্নিত করে। এটি Angular অ্যাপ্লিকেশনের কম্পোনেন্ট, ডাইরেক্টিভ, পাইপ, সার্ভিস, এবং অন্যান্য ফিচারগুলিকে সংগঠিত করে এবং মডিউলের মধ্যে নির্ধারণ করে।

NgModule এর মূল গঠন:

import { NgModule } from '@angular/core';

@NgModule({
  declarations: [ /* কম্পোনেন্ট, ডিরেক্টিভ, পাইপ */ ],
  imports: [ /* অন্যান্য মডিউল */ ],
  providers: [ /* সার্ভিস */ ],
  bootstrap: [ /* রুট কম্পোনেন্ট */ ]
})
export class AppModule { }

NgModule এর গুরুত্বপূর্ণ অংশ

1. declarations

  • এখানে কম্পোনেন্ট, ডিরেক্টিভ, এবং পাইপ ডিক্লেয়ার করা হয় যা এই মডিউলের অন্তর্গত।
  • উদাহরণ:

    declarations: [
      AppComponent,
      HelloWorldComponent
    ]
    

2. imports

  • এখানে অন্য মডিউলগুলো ইমপোর্ট করা হয়, যাতে সেগুলোর ফিচার এই মডিউলে ব্যবহার করা যায়।
  • উদাহরণ:

    imports: [
      BrowserModule,
      FormsModule
    ]
    

3. providers

  • এখানে সার্ভিস ডিফাইন করা হয়, যা এই মডিউলের ভেতর ইনজেকশন (Dependency Injection) এর জন্য ব্যবহৃত হয়।
  • উদাহরণ:

    providers: [
      MyService
    ]
    

4. bootstrap

  • এটি মূলত রুট কম্পোনেন্টকে নির্দেশ করে, যা অ্যাপ্লিকেশন শুরু হওয়ার সময় লোড হয়।
  • উদাহরণ:

    bootstrap: [
      AppComponent
    ]
    

AppModule: একটি মৌলিক উদাহরণ

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { HelloWorldComponent } from './hello-world/hello-world.component';

@NgModule({
  declarations: [
    AppComponent,
    HelloWorldComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Angular এর মধ্যে মডিউল প্রকারভেদ

1. Root Module

  • প্রতিটি Angular অ্যাপ্লিকেশনে একটি Root Module থাকে, যা সাধারণত AppModule নামে পরিচিত।
  • এটি অ্যাপ্লিকেশনের প্রাথমিক কম্পোনেন্ট এবং মডিউলগুলোকে লোড করে।

2. Feature Module

  • বড় অ্যাপ্লিকেশনে বিভিন্ন ফিচার আলাদা মডিউলে বিভক্ত করা হয়।
  • উদাহরণ: UserModule, AdminModule ইত্যাদি।

3. Shared Module

  • এমন মডিউল যেখানে সাধারণভাবে ব্যবহারযোগ্য কম্পোনেন্ট, ডাইরেক্টিভ, পাইপ, এবং সার্ভিস রাখা হয়।
  • উদাহরণ: SharedModule

4. Core Module

  • এমন মডিউল যেখানে সার্ভিস এবং অ্যাপ্লিকেশনের জন্য গুরুত্বপূর্ণ কার্যক্রম রাখা হয়।

একটি Feature Module উদাহরণ

Step 1: নতুন মডিউল তৈরি

Angular CLI ব্যবহার করে নতুন মডিউল তৈরি করতে:

ng generate module user

Step 2: মডিউলের গঠন

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { UserComponent } from './user.component';

@NgModule({
  declarations: [
    UserComponent
  ],
  imports: [
    CommonModule
  ],
  exports: [
    UserComponent
  ]
})
export class UserModule { }

Step 3: Root Module এ Import করা

AppModuleUserModule ইমপোর্ট করতে হবে:

import { UserModule } from './user/user.module';

@NgModule({
  imports: [
    BrowserModule,
    UserModule
  ]
})
export class AppModule { }

NgModule এর সুবিধা

  • মডুলার আর্কিটেকচার: বড় অ্যাপ্লিকেশন ছোট ছোট অংশে বিভক্ত করা যায়।
  • কোড পুনঃব্যবহার: Shared Module এর মাধ্যমে কোড পুনরায় ব্যবহার করা সহজ।
  • ডিপেনডেন্সি ম্যানেজমেন্ট: সার্ভিস এবং ফিচারগুলোর নির্ভরতা ম্যানেজ করা সহজ।
  • লোড টাইম অপ্টিমাইজেশন: Lazy Loading ব্যবহার করে প্রয়োজনীয় মডিউল লোড করা যায়।

Angular-এ NgModules অ্যাপ্লিকেশনকে সুসংগঠিত এবং ম্যানেজযোগ্য রাখে, যা ডেভেলপমেন্ট প্রক্রিয়াকে আরও সহজ এবং কার্যকর করে তোলে।

Content added By
Promotion